<template>
  <div>
    <el-dialog
      :visible.sync="dialogVisible"
      :close-on-click-modal="false"
      :title="title==='add'?'新建标签组':'编辑标签组'"
      width="600px"
      @close="close"
    >
      <div v-loading="dialogLoading">
        <el-form
          ref="form"
          :model="form"
          :rules="rules"
          label-width="120px"
          size="small"
        >
          <el-form-item prop="groupName" label="标签组名称">
            <el-input v-model.trim="form.groupName" placeholder="请输入内容" />
          </el-form-item>
        </el-form>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button v-if="title!=='add'" size="medium" round style="float: left; color: #fa5151" @click="delSubmit">删除标签组</el-button>
        <el-button size="medium" round @click="hide">取 消</el-button>
        <el-button size="medium" round type="primary" @click="onSubmit()">保 存</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { addNewTagGroup, editTagGroup } from '@/api/vip'
import { mapGetters } from 'vuex'
import { delTag, delTagGroup } from '../../../../api/vip'
export default {
  data() {
    return {
      /**
       * 表单校验字段相关
       */
      // 表单规则
      rules: {
        groupName: [
          {
            required: true,
            message: '请输入标签组名',
            trigger: ['blur', 'change']
          }
        ]
      },
      // 配置
      resolve: null,
      reject: null,
      // 状态
      dialogVisible: false,
      dialogLoading: false,
      title: 'add', // 弹窗标题
      groupName: null,
      // 数据
      form: {
        id: null,
        groupName: null
      }
    }
  },
  computed: {
    ...mapGetters(['userInfo'])
  },
  methods: {
    /**
     * 数据组
     */
    /**
     * 按钮组
     */
    /**
     * 状态组
     */
    open(type, tagDetail = {}) {
      this.title = type
      console.log(tagDetail)
      this.form.groupName = JSON.parse(JSON.stringify(tagDetail)).tagName || ''
      this.groupName = JSON.parse(JSON.stringify(tagDetail)).tagName || ''
      this.form.id = JSON.parse(JSON.stringify(tagDetail)).id || ''
      console.log(this.form.id)
      this.show()
      return new Promise((resolve, reject) => {
        this.resolve = resolve
        this.reject = reject
      })
    },

    show() {
      this.dialogVisible = true
    },

    hide() {
      this.resolve = null
      this.reject = null
      this.dialogVisible = false
    },

    close() {
      this.dialogLoading = false
      this.$refs.form.resetFields()
    },
    /**
     * 方法组
     */
    // 保存
    onSubmit() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.dialogLoading = true
          const params = Object.assign({}, this.form)
          // 删除多余字段
          for (const key in params) {
            if (params[key] === '') {
              delete params[key]
            }
          }
          if (this.title === 'add') {
            addNewTagGroup(params).then(() => {
              this.$notify({
                title: '成功',
                message: '新增成功',
                type: 'success',
                duration: 2000,
                offset: 40
              })
              // 新增成功则重新获取列表数据
              this.resolve('add')
              this.hide()
              this.dialogLoading = false
              this.hide()
            }).catch(() => {})
              .finally(() => {
                this.dialogLoading = false
              })
          } else if (this.title === 'update') {
            editTagGroup(params).then(() => {
              this.$notify({
                title: '成功',
                message: '修改成功',
                type: 'success',
                duration: 2000,
                offset: 40
              })
              this.resolve('update')
              this.hide()
            })
              .catch(() => {})
              .finally(() => {
                this.dialogLoading = false
              })
          }
        }
      })
    },
    // 删除
    delSubmit() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.$prompt(`检测到你正在删除标签组<span style="color: #fa5151">${this.groupName}</span>，此操作将会自动删除该标签组下的所有标签且数据不可逆！`, '提示', {
            confirmButtonText: '确定删除',
            showCancelButton: false,
            type: 'warning',
            dangerouslyUseHTMLString: true,
            inputPlaceholder: '请输入标签组名称确认',
            inputValidator: (val) => {
              if (val !== this.groupName) {
                return '标签组名不相符'
              }
            }
          }).then(() => {
            this.dialogLoading = true
            delTagGroup(this.form.id).then(() => {
              this.$notify({
                title: '成功',
                message: '删除成功',
                type: 'success',
                duration: 2000,
                offset: 40
              })
              this.resolve('del')
              this.hide()
            }).catch(() => {})
              .finally(() => {
                this.dialogLoading = false
              })
          }).catch(() => {})
        }
      })
    }
  }
}
</script>

<style scoped>
</style>
